<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .a {
        color: red;
      }
      .b {
        font-size: 3rem;
      }
      .c {
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <!-- <box id="box" class="a b c">hello box</box> -->
    <box id="box" class="c">hello box</box>
    <script>
      const box = document.getElementById("box");

      // setTimeout(() => {
      //   // class = className
      //   box.className = "a b c";
      //   // box.classList.add("a", "b", "c");
      // }, 3000);

      // setTimeout(() => {
      //   box.classList.remove("a");
      //   box.classList.remove("b");
      //   box.classList.remove("c");
      // }, 6000);

      setInterval(() => {
        // 不存在就添加，存在就删除
        // box.classList.toggle("a");
      }, 2000);

      console.log(box.classList.contains("c"));
      console.log(box.classList.contains("a"));
    </script>
  </body>
</html>
